<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"%>
<%@ include file="/jsp/base/taglibs.jsp"%>
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
	<title>Officing管理</title>
	<link href="${ctx }/style/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx }/style/js/jquery.js"></script>
	<script type="text/javascript" src="${ctx }/style/js/bootstrap.min.js"></script>
	<style type="text/css">
	#top-btns {
		padding:10px;
	}
	</style>
	<script type="text/javascript">
	//新增
	function add() {
		$('#modal').modal("show");
		
		$.ajax({
		   url: "${ctx }/officing/add.do",
		   type: "POST",
		   dataType:"html",
		   success: function(data){
			   $('#modal .modal-body').html(data);
		   },
		   error:function() {
			   alert("错误");
		   }
		});
		
	}
	
	//保存
	function save() {
		$.ajax({
		   url: "${ctx }/officing/save.do",
		   type: "POST",
		   data:$("#add-form").serialize(),
		   dataType:"json",
		   success: function(data){
			   if(data.success) {
				   alert("保存成功！");
				   closeModal();
				   window.location.href=window.location.href;
			   } else {
				   alert("保存失败！");
			   }
		   },
		   error:function() {
			   alert("错误");
		   }
		});
	}
	
	//编辑
	function edit() {
		
		var $ckx = $(".form-ckx:checked");
		if($ckx.size() == 0) {
			alert("请先选中一行");
			return;
		}
		
		if($ckx.size() != 1) {
			alert("只能选中一行");
			return;
		}
		
		$('#modal').modal("show");
		
		var id = $(".form-ckx:checked").data("id");
		$.ajax({
		   url: "${ctx }/officing/edit.do",
		   data:{id:id},
		   type: "POST",
		   dataType:"html",
		   success: function(data){
			   $('#modal .modal-body').html(data);
		   },
		   error:function() {
			   alert("错误");
		   }
		});
	}
	
	//更新
	function update() {
		$.ajax({
		   url: "${ctx }/officing/update.do",
		   type: "POST",
		   data:$("#edit-form").serialize(),
		   dataType:"json",
		   success: function(data){
			   if(data.success) {
				   alert("更新成功！");
				   closeModal();
				   window.location.href=window.location.href;
			   } else {
				   alert("更新失败！");
			   }
		   },
		   error:function() {
			   alert("错误");
		   }
		});
	}
	
	//删除
	function del() {
		
		var cfm = window.confirm("确定删除吗？");
		if(!cfm) {
			return;
		}
		
		var $ckx = $(".form-ckx:checked");
		if($ckx.size() == 0) {
			alert("请先选中一行");
			return;
		}
		
		if($ckx.size() != 1) {
			alert("只能选中一行");
			return;
		}
		
		var id = $(".form-ckx:checked").data("id");
		$.ajax({
		   url: "${ctx }/officing/del.do",
		   type: "POST",
		   data:{id:id},
		   dataType:"json",
		   success: function(data){
			   if(data.success) {
				   alert("删除成功！");
				   closeModal();
				   window.location.href=window.location.href;
			   } else {
				   alert("删除失败！");
			   }
		   },
		   error:function() {
			   alert("错误");
		   }
		});
	}
	
	function closeModal() {
		$('#modal').modal("hide");
	}
	</script>
</head>
<body>
<div id="top-btns">
	<a href="javascript:void(0)" class="btn btn-primary btn-sm" onclick="add()" >新增</a>
	<a href="javascript:void(0)" class="btn btn-warning btn-sm" onclick="edit()">编辑</a>
	<a href="javascript:void(0)" class="btn btn-info btn-sm" onclick="del()">删除</a>
</div>
<table class="table table-striped table-bordered table-hover">
	<tr>
		<th></th>
		<th>申请人</th>
		<th>类型</th>
		<th>办公用品名称</th>
		<th>单位</th>
		<th>数量</th>
		<th>型号</th>
		<th>原因</th>
		<th>创建时间</th>
		<th>更新时间</th>
	</tr>
	<c:forEach items="${list }" var="item">
	<tr>
		<td>
			<input type="checkbox" class="form-ckx" data-id="${item.id }" />
		</td>
		<td>${item.username }</td>
		<td>${item.type }</td>
		<td>${item.name }</td>
		<td>${item.unit }</td>
		<td>${item.count }</td>
		<td>${item.spec }</td>
		<td>${item.reason }</td>
		<td><fmt:formatDate value="${item.createtime }" pattern="yyyy-MM-dd HH:mm" /></td>
		<td><fmt:formatDate value="${item.updatetime }" pattern="yyyy-MM-dd HH:mm" /></td>
	</tr>
	</c:forEach>
	<tr>
		<td colspan="10" id="page-wrapper" align="right">
			
			<jsp:include page="/jsp/base/pagination.jsp" flush="true"  >
				<jsp:param value="${ctx }/officing/page.do" name="url"/>
			</jsp:include>
		</td>
	</tr>
</table>

<!-- Boostrap modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">officing管理</h4>
      </div>
      <div class="modal-body">
        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>